import Vue from 'vue'
import Vuex from 'vuex'

// 1.安装插件
Vue.use(Vuex)

// 2.创建对象
const moduleB = {
    state: {
        name: 'lisi'
    },
    mutations: {
        updateName (state, payload) {
            state.name = payload
        }
    },
    getters: {
        fullname(state) {
            return state.name + '111111'
        },
        fullname2(state, getters) {
            return getters.fullname + '222222'
        },
        fullname3(state, getters, rootState) {
            return getters.fullname2 + rootState.counter
        }
    },
    actions: {
        aUpdateName(context) {
            setTimeout(() => {
                context.commit('updateName', 'wangwu');
            }, 1000)
        }
    }
}

const store = new Vuex.Store({
    state: {
        counter: 10,
        info: {
            name: 'kobe',
            age: 40,
            height: 1.98
        }
    },
    mutations: {
        // 方法
        increment(state) {
            state.counter++
        },
        decrement(state) {
            state.counter--
        },
        // incrementCount(state, count) {
        //     state.counter += count
        // }
        incrementCount(state, payload) {
            state.counter += payload.count
        },
        updateInfo (state) {
            state.info.name = 'lbc'
            // setTimeout(() => {
            //     state.info.name = 'lbc'
            // }, 1000)  // 去actions中执行异步操作，在这里这么干是错误的
            // state.info['address'] = '洛杉矶'  // 单独使用改行不是响应式的
            // Vue.set(state.info, 'address', '洛杉矶')  // 响应式的
            // delete state.info.age  // 不是
            // Vue.delete(state.info, 'age')    // 是
        }  
    },
    actions: {
        // context： 上下文
        // aUpdateInfo(context, payload) {
        //     setTimeout(() => {
        //         context.commit('updateInfo')
        //         console.log(payload.message)
        //         payload.success()
        //     }, 1000)
        // }
        aUpdateInfo(context, payload) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    context.commit('updateInfo')
                    console.log(payload)
                    resolve('1111111111')
                }, 1000)
            })  
        }
    },
    getters: {
        // 当数据是需要经过一定的处理再使用的话，就用getters
        powerCounter(state) {
            return state.counter * state.counter
            // 还可以 return 一个function(age) {return age} --方法
        } 
    },
    modules: {
        //  分模块
        a: {
            state: {
                name: 'zhangsan'
            },
            mutations: {},
            actions: {},
            getters: {}
        },
        b: moduleB,
        c: {

        }
    }
})

// 3.导出store独享
export default store